`<template>
  <view class="content">
    <view class="order-info">
      <!-- <view class="order-distribution">
        <view class="order-distribution-bt">
          <view class="order-distribution-bt-h4">外卖配送</view>
          <text>待支付</text>
        </view>
        <view class="distribution-tba-box">
          <view class="distribution-diz hmb-k">
            <text>{{data.address}}{{data.doorplate}}</text>
          </view>
          <view class="distribution-diz-txt">
            <text>{{data.linkman}}({{data.gender}})</text>
            <text>{{data.phone}}</text>
          </view>
        </view>
      </view> -->
      <view class="order-distribution">
        <view class="order-distribution-bt" v-if="data.type == 1">
          <view class="order-distribution-bt-h4">外买配送</view>
          <text>待支付</text>
        </view>
        <view class="order-distribution-bt" v-if="data.type == 2">
          <view class="order-distribution-bt-h4">到店自提</view>
          <text>待支付</text>
        </view>
        <view class="distribution-tba-box" v-if="data.type == 1">
          <view :class="data.status == 2?'distribution-diz ziti-b':'distribution-diz'" @click="dianhua">
            <text>{{data.address}}{{data.doorplate}}</text>
          </view>
          <view class="distribution-diz-txt">
            <text>{{data.linkman}}({{data.gender}})</text>
            <text>{{data.phone}}</text>
          </view>
        </view>
        <view class="distribution-tba-box" v-if="data.type == 2">
          <view class="distribution-diz">
            <text>{{ttloagText.store_address}}</text>
          </view>
          <view class="distribution-diz-txt">
            <text>{{ttloagText.store_linkman}}{{ttloagText.store_phone}}</text>
            <text>{{ttloagText.dei}}</text>
          </view>
        </view>
      </view>
      <view class="distribution-shid">
        <view class="distribution-shid-txt">配送时间</view>
        <view class="distribution-shid-sj">
          <text>{{data.reservation_time}}</text>
        </view>
      </view>
      <view class="distribution-list-box" v-if="data.items[0].detail.goods">
        <view class="distribution-zbt">我点的菜</view>
        <view class="distribution-list">
          <view class="distribution-list-txt" v-for="(items,i) in data.items" :key="i">
            <div class="distribution-xfl" v-for="(goods,g) in items.detail.goods" :key="g">
              <view class="distribution-h4">主菜</view>
              <view>
                {{goods.title}}+{{goods.attr_name}}
                <text>￥{{goods.discount_price}}</text>
              </view>
            </div>
            <div class="distribution-xfl">
              <view class="distribution-h4">烹饪方式</view>
              <view>
                {{items.detail.cooking.name}}
                <text>￥{{items.detail.cooking.price}}</text>
              </view>
            </div>
            <div class="distribution-xfl">
              <view class="distribution-h4">调料</view>
              <view v-for="tiaoliao in items.detail.seasoning" :key="tiaoliao">{{tiaoliao.name}}</view>
            </div>
            <div class="distribution-xfl">
              <view class="distribution-h4">配料</view>
              <view v-for="peiliao in items.detail.collocation" :key="peiliao">{{peiliao.name}}</view>
            </div>
						<div class="distribution-xfl">
						  <view class="distribution-h4">备注</view>
						  <view >{{items.remark}}</view>
						</div>
          </view>
        </view>
      </view>
      <view class="distribution-list-box" v-else>
        <view class="distribution-zbt">我点的菜</view>
        <view class="distribution-list">
          <view class="distribution-list-txt">
            <div class="distribution-xfl" v-for="(item,index) in data.items" :key="index">
              <view>
                {{item.detail.title}}x{{item.num}}
                <text>￥{{item.detail.discount_price * item.num}}</text>
              </view>
            </div>
          </view>
        </view>
      </view>
      <view class="distribution-ybg">
        <view>打包费</view>
        <text>￥{{data.packing_cost}}</text>
      </view>
      <view class="distribution-psf">
        <view>配送费</view>
        <text>￥{{data.delivery_cost}}</text>
      </view>
      <view class="distribution-psf">
        <view>总价</view>
        <text>￥{{data.original_amount}}</text>
      </view>
      <view class="distribution-shid">
        <view class="distribution-shid-txt">下单时间</view>
        <view class="distribution-shid-sj">
          <text>{{data.create_time}}</text>
        </view>
      </view>
      <button type="default" class="lj-btn" @click="ljfkck" style="margin-left: 15px">立即付款</button>
      <button type="default" class="lj-btn" @click="quxiao">取消订单</button>
    </view>
    <dacizinavtag :current="item_index" @click="tabClick"></dacizinavtag>
  </view>
</template>

<script>
  import dacizinavtag from "@/components/dacizi-navtag/dacizi-navtag.vue";

  export default {
    components: {
      dacizinavtag
    },
    data() {
      return {
        item_index: 3, // 单页面id
        data: "",
        ttloagText: uni.getStorageSync("jyfw")
      };
    },
    onLoad(id) {
      var than = this;
      uni.request({
        //获取订单详情
        url: getApp().globalData.http + "/order/info",
        data: {
          id: id.id
        },
        method: "post",
        header: {
          "content-type": "application/x-www-form-urlencoded",
          token: uni.getStorageSync("token")
        },
        success: res => {
          than.data = res.data.data;
        }
      });
    },
    methods: {
      ljfkck(id, type) {
        var than = this;
        uni.request({
          url: getApp().globalData.http + "/order/pay",
          data: {
            id: this.data.id
          },
          method: "post",
          header: {
            "content-type": "application/x-www-form-urlencoded",
            token: uni.getStorageSync("token")
          },
          success: res => {
            if (res.data.code) {
              wx.requestPayment({
                timeStamp: res.data.data.timeStamp,
                nonceStr: res.data.data.nonceStr,
                package: res.data.data.package,
                signType: res.data.data.signType,
                paySign: res.data.data.paySign,
                success(res) {
                  if (than.data.type == 1) {
                    wx.reLaunch({
                      url: "/pages/my/zhifu"
                    });
                  } else {
                    wx.reLaunch({
                      url: "/pages/my/cfzhifu?id=" + this.data.id
                    });
                  }
                },
                fail(res) {}
              });
            } else {
              wx.showToast({
                title: res.data.msg,
                icon: "none",
                duration: 2000
              });
            }
          }
        });
      },
      quxiao() {
        var than = this;
        wx.showModal({
          title: "提示",
          content: "确定取消订单？",
          success(res) {
            if (res.confirm) {
              uni.request({
                url: getApp().globalData.http + "/order/cancel",
                data: {
                  id: than.data.id
                },
                method: "post",
                header: {
                  "content-type": "application/x-www-form-urlencoded",
                  token: uni.getStorageSync("token")
                },
                success: res => {
                  if (res.data.code) {
                    uni.showToast({
                      title: '取消订单成功',
                      icon: 'success',
                      duration: 2000,
                      complete:() =>{
                        uni.navigateBack({
                          delta: 1
                        })
                      }
                    })
                  } else {
                    wx.showToast({
                      title: res.data.msg,
                      icon: "none",
                      duration: 2000
                    });
                  }
                }
              });
            } else if (res.cancel) {}
          }
        });
      }
    }
  };
</script>